<template>
  <div class="video-details-box">
    <!-- 两列布局 -->
    <el-row class="video-details-flex" type="flex">
      <el-col :span="16" class="col-0">
        <div style="display: flex; flex-direction: column">
          <el-page-header
            @back="goBack">
            <template #content>
              <span style="font-size: 16px; font-weight: 700">视频详情</span>
            </template>
          </el-page-header>
          <div class="video-box" ref="videoBoxRef">
            <video :poster="videoDetails.coverUrl"
                   :src="videoPlaySource.url"
                   @canplay="videoCanPlay"
                   @click="togglePlay"
                   @pause="pauseVideo"
                   @timeupdate="videoTimeUpdate"
                   class="video"
                   ref="videoRef"></video>
            <div :style="{ backgroundImage: `url(${videoDetails.coverUrl})` }" class="video-bg-box"></div>
            <video class="video" style="opacity: 0;" v-show="!isSuspension"></video>

            <!-- 播放按钮 -->
            <div @click="playVideo" class="video-play-icon" v-show="!isPlay && isSuspension">
              <img :src="playIcon" alt="">
            </div>
            <!-- 操作栏 -->
            <div class="video-control">
              <!-- 进度条 -->
              <div @click="jumpToPos" class="progress" ref="videoProgressRef">
                <!-- 播放进度 -->
                <div class="play-progress" ref="videoPlayProgressRef"></div>
                <!-- 圆心 -->
                <div class="circle" ref="videoCircleRef"></div>
              </div>
              <!-- 操作栏 -->
              <div class="video-control-button">
                <div style="float: left; display: flex; width: 100%; align-items: center">
                  <div @click="playVideo" class="play-icon" v-show="!isPlay">
                    <img :src="playIcon" alt="">
                  </div>
                  <div @click="pauseVideo" class="pause-icon" v-show="isPlay">
                    <img :src="pauseIcon" alt="">
                  </div>
                  <div class="duration" v-if="videoRef">
                    {{ currentTime | secondToMinute }} / {{ overTime | secondToMinute }}
                  </div>
                </div>

                <div style="float: right; display: flex; margin-right: 10px;">
                  <div class="volume">
                    <img :src="soundIcon" alt="" class="sound-icon">
                    <div @click="resizeVolume" class="progress" ref="volumeProgressRef">
                      <el-progress :percentage="this.volume" :show-text="false"
                                   color="#ec4141"></el-progress>
                    </div>
                    <el-divider direction="vertical" style="margin: 0"/>
                  </div>
                  <div class="clarity">
                    <div class="clarity-box">
                      <div class="up-select">
                        <div style="text-align: center"
                             v-for="(resolution, index) in reverseResolutions">
                          {{ resolution.resolution === 1080 ? '超清' : resolution.resolution ===
                          720 ? '高清' : resolution.resolution === 480 ? '标清' : '流畅' }}
                        </div>
                        <div
                          style="height: 20px; border-top: none; background: transparent"></div>
                      </div>
                      <div>
                        {{ this.videoPlaySource.r === 1080 ? '超清' : this.videoPlaySource.r ===
                        720 ? '高清' : this.videoPlaySource.r === 480 ? '标清' : '流畅' }}
                      </div>
                    </div>
                  </div>
                  <div class="fullscreen">
                    <el-divider direction="vertical"/>
                    <i @click="videoFullScreen" class="el-icon-full-screen fullscreen-icon"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 发布者信息 -->
          <div>
            <div style="float: left; display: inline-block; vertical-align: middle"
                 v-if="videoDetails.creator">
              <!-- 指定图片与文字用中线对齐 -->
              <el-avatar :size="50" :src="videoDetails.creator.avatarUrl + '?param=50y50'"
                         style="vertical-align: middle"/>
              <span style="margin-left: 5px;">
                {{ videoDetails.creator.nickname }}
              </span>
            </div>
            <div style="float: right">
              <el-button round type="danger"><i class="el-icon-plus"></i> 关注</el-button>
            </div>
            <!-- h1, h2, hn等元素都被ElementUI重写了 -->
            <div style="clear: both; padding-top: 1px;">
              <h1>{{ videoDetails.title }}</h1>
            </div>
            <!-- 发布时间 -->
            <div style="color: rgba(0, 0, 0, .3); font-size: 13px; margin: 10px 0;">
              发布: {{ videoDetails.publishTime | toDate_yyyy_mm_dd }} 播放:{{ videoDetails.playTime }}次
            </div>
            <!-- 视频标签 -->
            <div style="margin: 10px 0;">
              <el-tag :key="videoGroup.id" class="video-tag" type="info"
                      v-for="videoGroup in videoDetails.videoGroup">
                {{ videoGroup.name }}
              </el-tag>
            </div>
            <div>
              <div style="float: left">
                <el-button @click="likeVideo" size="medium" style="position: relative;">
                  <img :src="!isLikeVideo ? goodIcon : veryGoodIcon"
                       class="like-icon" style="position: absolute; left: 5px; top: 2px">
                  <span style="padding-left: 10px;" v-if="!isLikeVideo">赞({{ videoDetails.praisedCount }})</span>
                  <span style="padding-left: 10px;" v-else>赞({{ videoDetails.praisedCount }})</span>
                </el-button>
                <el-button size="medium" style="position: relative;"><img :src="addListIcon"
                                                                          alt=""
                                                                          class="like-icon"
                                                                          style="position: absolute; left:10px; top: 5px; width: 20px; height: 20px">
                  <span
                    style="padding-left: 15px;"></span> 收藏({{ videoDetails.subscribeCount }})
                </el-button>
                <el-button size="medium" style="position: relative;"><img :src="shareIcon"
                                                                          alt=""
                                                                          class="like-icon"
                                                                          style="position: absolute; left: 10px; top: 5px; width: 20px; height: 20px">
                  <span
                    style="padding-left: 15px;"></span> 分享({{ videoDetails.shareCount }})
                </el-button>
              </div>
              <div style="float: right">
                <el-link type="info">举报</el-link>
              </div>
            </div>

          </div>
          <!-- 评论 -->
          <div class="comment-box">
            <div style="margin: 10px 0;">
              <h3 style="display: inline; margin-right: 5px;">评论</h3>({{ videoDetails.commentCount }})
            </div>
            <el-input
              :rows="3"
              maxlength="140"
              placeholder="请输入内容"
              resize="none"
              show-word-limit
              type="textarea"
            />
            <div style="margin: 10px 0">
              <div style="float: left;">
                <span style="font-size: 18px; margin-right: 10px;">&#128512;</span>
                <span style="font-size: 18px;margin-right: 10px;">@</span>
                <span style="font-size: 18px;margin-right: 10px;">
                  #
                </span>
              </div>
              <div style="float: right">
                <el-button round size="small">
                  评论
                </el-button>
              </div>
            </div>
            <div id="newComment"/>
            <div style="clear: both" v-if="hotComments && hotComments.length > 0">
              <div style="padding: 20px 0 30px">
                <strong>
                  精彩评论
                </strong>
              </div>
              <div>
                <div :key="hotComment.commentId" v-for="(hotComment, index) in hotComments">
                  <VideoComment :comment="hotComment"/>
                  <!-- 结尾不需要 -->
                  <el-divider v-if="index !== hotComments.length - 1"/>
                </div>
              </div>
              <div style="text-align: center; margin: 20px 0">
                <el-button round>更多精彩评论 ></el-button>
              </div>
            </div>
            <div style="clear: both">
              <div style="margin: 10px 0; font-weight: 600">最新评论({{ videoDetails.commentCount }})</div>
              <div :key="comment.commentId" v-for="(comment, index) in comments">
                <VideoComment :comment="comment"/>
                <!-- 结尾不需要 -->
                <el-divider v-if="index !== comment.length - 1"/>
              </div>
            </div>
            <el-pagination
              :page-size="20"
              :total="videoDetails.commentCount"
              @current-change="handlePageChange"
              background
              layout="prev, pager, next"
              style="text-align: center; padding: 30px 0;"
              v-if="videoDetails.commentCount > 20">
            </el-pagination>
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="col-1">
        <div style="height:25px;font-size: 16px; font-weight: 700">相关推荐</div>
        <div style="margin: 20px 0; width: 100%">
          <div :key="relatedVideo.vid" class="video-cell" v-for="relatedVideo in relatedVideos">
            <!-- 左侧-图片封面 -->
            <div @click="playRecommendVideo(relatedVideo)" class="video-image-cover">
              <el-image :src="relatedVideo.coverUrl + '?param200y200'" class="video-cover"
                        fit="cover"/>
              <!-- 播放数 -->
              <div class="playCount">
                <el-image :src="playCountIcon" class="playCountIcon"></el-image>
                <span>{{ relatedVideo.playTime | unitToThousand }}</span>
              </div>
              <!-- 时长 -->
              <span class="video-duration">{{ relatedVideo.durationms | millisecondToMinute }}</span>
            </div>
            <!-- 右侧-标题、作者 -->
            <div
              style="padding-left: 10px; display: flex; flex-direction: column; justify-content: space-around">
              <!-- 标题 -->
              <div class="video-title">
                <span class="title">{{ relatedVideo.title }}</span>
              </div>
              <!-- 作者 -->
              <div class="video-author">
                by {{ relatedVideo.creator.map(it => it.userName).join('/') }}

              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>


    <div class="suspension-window" ref="suspensionWindowRef">
      <div class="video-box" ref="suspensionWindowVideoBoxRef" style="position: relative;">
        <!-- 播放按钮 -->
        <div @click="playVideo" class="video-play-icon" v-show="!isPlay">
          <img :src="playIcon" alt="">
        </div>
      </div>
    </div>

    <el-backtop :right="100" @click="reload" target=".main">
      <i class="el-icon-refresh-right"></i>
    </el-backtop>

    <el-backtop :right="40" ref="backTop" target=".main">
      <i class="el-icon-caret-top"></i>
    </el-backtop>
  </div>
</template>

<script lang="ts">
  import playIcon from '@/assets/img/svg/music_play.svg'
  import pauseIcon from '@/assets/img/svg/24gl-pause.svg'
  import soundIcon from '@/assets/img/sound.png'
  import goodIcon from '@/assets/img/svg/icon24_good_n.svg'
  import veryGoodIcon from '@/assets/img/svg/icon24_good_a.svg'
  import topicIcon from '@/assets/img/svg/video-topic.svg'
  import playCountIcon from '@/assets/img/discover/playCount.png'
  import cover from '@/assets/img/banner/109951165787662948.jpg'
  import shareIcon from '@/assets/img/menu/icn_share.svg'
  import addListIcon from '@/assets/img/menu/icn_addlist.svg'
  import VideoComment from '@/components/video/comment/VideoComment'
  import { videoApi } from '@/api/video/video'

  import wind from '@/assets/video/起风了_all.mp4'
  import darkMatter from '@/assets/video/暗物质.mp4'

  export default {
    name: 'VideoDetails',
    components: { VideoComment },
    inject: ['reload'],
    data() {
      return {
        playCountIcon,
        wind,
        shareIcon,
        addListIcon,
        darkMatter,
        pauseIcon,
        playIcon,
        soundIcon,
        goodIcon,
        veryGoodIcon,
        topicIcon,
        cover,
        videoRef: null,
        videoBoxRef: null,
        videoIsFullScreen: false,
        isPlay: false,
        vid: this.$route.params.vid || '',
        videoDetails: {},
        relatedVideos: [],
        hotCommentMore: false,
        hotComments: [],
        commentMore: false,
        comments: [],
        videoProgressRef: null,
        videoPlayProgressRef: null,
        videoCircleRef: null,
        currentTime: 0,
        overTime: 0,
        videoPlaySource: '',
        volume: 100,
        volumeProgressRef: null,
        offset: 0,
        likeVideoIds: [],
        isLikeVideo: false,
        isSuspension: false
      }
    },
    created() {
      this.getVideoDetails()
      this.getVideoPlayUrl()
      this.getRelatedVideo()
      this.getVideoComments()
      this.likeVideoIds.push(...window.storage.get('likeVideoIds') || [])
    },
    computed: {
      reverseResolutions() {
        if (this.videoDetails && this.videoDetails.resolutions) {
          return this.videoDetails.resolutions.reverse()
        }
        return []
      }
    },
    mounted() {
      this.videoRef = this.$refs['videoRef']
      this.videoBoxRef = this.$refs['videoBoxRef']
      this.videoProgressRef = this.$refs['videoProgressRef']
      this.videoPlayProgressRef = this.$refs['videoPlayProgressRef']
      this.videoCircleRef = this.$refs['videoCircleRef']
      this.volumeProgressRef = this.$refs['volumeProgressRef']
      this.listenVideoBox()

    },
    methods: {
      /** 监听videoBox */
      listenVideoBox() {
        var io = new IntersectionObserver((entry) => {
          var videoBoxEntry = entry.find(v => v)
          var isVisible = videoBoxEntry.intersectionRatio > 0
          this.isSuspension = isVisible
          if (isVisible) {
            // 元素可见时，关闭悬浮窗
            console.log('元素可见')
            if (!this.$refs.videoBoxRef) {
              return
            }
            this.$refs.videoBoxRef.appendChild(this.$refs.videoRef)
            this.$refs.suspensionWindowVideoBoxRef.style.opacity = 0
            this.$refs.suspensionWindowVideoBoxRef.style.backgroundColor = 'none'

          } else {
            // 元素不可见时，展示悬浮窗
            console.log('元素不可见')
            if (!this.$refs.suspensionWindowVideoBoxRef) {
              return
            }
            this.$refs.suspensionWindowVideoBoxRef.appendChild(this.$refs.videoRef)
            this.$refs.suspensionWindowVideoBoxRef.style.opacity = 1
            this.$refs.suspensionWindowVideoBoxRef.style.backgroundColor = '#000'
          }
        })

        // 监听元素不可见
        io.observe(this.videoBoxRef)
      },
      /** 视频点赞 */
      likeVideo() {
        // 如果没点赞就点赞
        if (!this.isLikeVideo) {
          videoApi().likeResources({
            type: 5,
            id: this.vid
          }).then(res => {
            this.likeVideoIds.push(this.vid)
            this.videoDetails.praisedCount = this.videoDetails.praisedCount + 1
          })
        } else {
          // 取消点赞
          videoApi().likeResources({
            type: 5,
            t: 0,
            id: this.vid
          }).then(res => {
            this.likeVideoIds.splice(this.likeVideoIds.indexOf(this.vid), 1)
            this.videoDetails.praisedCount = this.videoDetails.praisedCount - 1
          })
        }
      },
      /* 播放推荐视频 */
      playRecommendVideo(video) {
        this.$router.push(`/video/details/${video.vid}`)
      },
      handlePageChange(page) {
        document.querySelector('#newComment').scrollIntoView({ behavior: 'smooth', block: 'center' })
        this.offset = page - 1
        this.getVideoComments()
      },
      /** 调整视频音量 */
      resizeVolume(e) {
        const volume = e.offsetX / this.volumeProgressRef.offsetWidth
        // 进度 0-1
        this.videoRef.volume = volume
        this.volume = volume * 100
      },

      /** 获取视频URL */
      getVideoPlayUrl() {
        videoApi().getVideoPlayUrl({
          id: this.vid
        }).then(res => {
          this.videoPlaySource = res.urls.find(v => v)
          console.log(this.videoPlaySource)
        })
      },

      /** 获得视频评论 */
      getVideoComments() {
        // offset: offset * limit
        videoApi().getVideoComments({
          id: this.vid,
          limit: 20,
          offset: this.offset * 20
        }).then(res => {
          const { more, hotMore, hotComments, comments } = res
          this.commentMore = more
          this.hotCommentMore = hotMore
          this.hotComments = hotComments
          this.comments = comments
        })
      },
      /** 视频全屏 */
      videoFullScreen() {

        this.videoIsFullScreen = !this.videoIsFullScreen
        // 如果需要全屏
        if (this.videoIsFullScreen) {
          this.requestFullScreen(this.videoBoxRef)
        } else {
          // 退出全屏
          let exitFullScreen = document.exitFullScreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen
          if (exitFullScreen) {
            exitFullScreen.call(document)
          }
        }
        this.videoTimeUpdate()
      },
      requestFullScreen(element) {
        // 兼容谷歌、火狐、IE
        let requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen
        if (requestMethod) {
          requestMethod.call(element)
        } else if (window.ActiveXObject) {
          debugger
          let ActiveXObject = window.ActiveXObject
          var wscript = new ActiveXObject('WScript.Shell')
          if (wscript !== null) {
            wscript.SendKeys('{F11}')
          }
        }
      },
      /** 播放视频 */
      playVideo() {
        this.isPlay = true
      },
      /** 暂停视频 */
      pauseVideo() {
        this.isPlay = false
      },
      /** 切换播放状态 */
      togglePlay() {
        this.isPlay = !this.isPlay
      },
      /** VideoCanPlay事件 */
      videoCanPlay() {
        this.currentTime = this.videoRef.currentTime
        this.overTime = this.videoRef.duration
      },
      /** video更新时间事件 */
      videoTimeUpdate() {
        this.currentTime = this.videoRef.currentTime
        const precent = (this.videoRef.currentTime / this.videoRef.duration) * 100
        this.videoPlayProgressRef.style.width = `${precent}%`
        this.videoCircleRef.style.left = `${precent}%`
      },
      /** 进度条跳转到指定位置 */
      jumpToPos(e) {
        const width = this.videoProgressRef.offsetWidth
        const precent = e.offsetX / width
        this.videoRef.currentTime = precent * this.videoRef.duration
        this.videoTimeUpdate()
      },

      /** 获得视频详情信息 */
      getVideoDetails() {
        videoApi().getVideoDetails({
          id: this.vid
        }).then(res => {
          this.videoDetails = res.data
        })
      },
      /** 获得视频详情信息 */
      getRelatedVideo() {
        videoApi().getRelatedVideo({
          id: this.vid
        }).then(res => {
          this.relatedVideos = res.data
        })
      }
    },
    watch: {
      isPlay: {
        handler(newIsPlay, oldIsPlay) {
          if (!this.videoRef) return
          if (newIsPlay) {
            this.videoRef.play()
          } else {
            this.videoRef.pause()
          }
        }
      },
      $route(to, from) {
        this.reload()
      },
      likeVideoIds(ids, oldIds) {
        this.isLikeVideo = ids.includes(this.vid)
        window.storage.set('likeVideoIds', ids)
      }
    }
  }
</script>

<style lang="less" scoped>

  .suspension-window {
    position: fixed;
    bottom: 110px;
    right: 40px;
    width: 250px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .like-icon {
    width: 25px;
    height: 25px;
  }

  .video-details-box {
    width: 100%;
  }

  .el-divider--horizontal {
    margin: 0;
  }

  .col-0 {
  }

  .col-1 {
    padding-left: 20px;
  }

  .video-details-flex {
    padding-top: 20px;
    padding-left: 20px;
    width: 100%;
    height: 100%;
  }

  .video {
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: pointer;
  }

  .video-box:-webkit-full-screen {
    .video {
    }
  }

  .video-bg-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    filter: blur(80px);
  }

  .video-box {
    position: relative;
    overflow: hidden;
    margin: 20px 0;
    width: 100%;
    height: 375px;

    .video-play-icon {
      position: absolute;
      z-index: 10;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70px;
      height: 70px;
      border-radius: 50px;
      background-color: rgba(0, 0, 0, .2);
      display: flex;
      justify-content: center;
      align-self: center;
      border: 2px solid rgba(255, 255, 255, .5);
      cursor: pointer;

      img {
        width: 25px;
        margin-left: 5px;
      }
    }

    .video-play-icon:hover {
      border: 2px solid rgba(255, 255, 255, 1);
    }
  }

  .video-control {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: rgba(0, 0, 0, .8);
    color: white;
    height: 40px;
    z-index: 99;

    .progress {
      height: 5px;
      width: 100%;
      background-color: rgba(255, 255, 255, .1);
      position: relative;
      cursor: pointer;

      .play-progress {
        position: absolute;
        top: 0;
        background-color: #FF4A4A;
        width: 0;
        height: 100%;
      }

      .circle {
        height: 5px;
        width: 5px;
        background-color: #FF4A4A;
        position: absolute;
        left: 0;
        top: -5px;
        border-radius: 50px;
        border: 5px solid white;
        pointer-events: none;
      }
    }
  }

  .video-tag {
    margin-right: 10px;
  }

  .video-control-button {
    background-color: rgba(0, 0, 0, .8);
    height: calc(100% - 5px);
    display: flex;

    .play-icon {
      margin-left: 10px;
      border-radius: 50px;
      border: 1px solid rgba(255, 255, 255, .5);
      width: 25px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-self: center;
      cursor: pointer;

      img {
        width: 15px;
        margin-left: 2px;
      }

    }

    .pause-icon {
      margin-left: 10px;
      border-radius: 50px;
      border: 1px solid rgba(255, 255, 255, .5);
      width: 25px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-self: center;
      cursor: pointer;

      img {
        width: 15px;
      }
    }

    .duration {
      vertical-align: bottom;
      font-size: 14px;
      margin-left: 10px;
    }

    .volume {
      width: 120px;
      justify-self: self-end;
      display: flex;
      align-items: center;

      .sound-icon {
        width: 20px;
        filter: contrast(0);
      }

      .progress {
        width: 100px;
      }
    }

    .clarity {
      display: flex;
      align-items: center;
      white-space: nowrap;
      font-size: 14px;
      color: rgba(255, 255, 255, .8);
      cursor: pointer;
    }

    .fullscreen {
      display: flex;
      align-items: center;

      .fullscreen-icon {
        margin-left: 5px;
        cursor: pointer;
      }
    }
  }

  .video-cell {
    width: 100%;
    height: 80px;
    display: flex;
  }

  .video-cell:not(:first-child) {
    margin: 10px 0;
  }


  .video-cover {
    border-radius: 5px;
    width: 150px;
    height: 80px;
    cursor: pointer;
  }

  .video-image-cover {
    position: relative;
  }

  .playCountIcon {
    width: 14px;
    height: 14px;
    vertical-align: text-top;
    margin-right: 2px;
  }

  .playCount {
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 14px;
  }

  .video-duration {
    position: absolute;
    right: 5px;
    bottom: 5px;
    color: white;
    font-size: 12px;
  }

  .playCountIcon + span {
    color: white;
  }

  .video-title {
    font-size: 14px;
    color: #000;
    cursor: pointer;
    padding-right: 10px;

    .title {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

  .video-author {
    font-size: 12px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 20px;
    cursor: pointer;
  }

  :deep(.el-progress-bar__outer) {
    background-color: rgba(255, 255, 255, .3);
  }


  :deep(.el-pager li.active) {
    color: #fff !important;
    background-color: #EC4141 !important;
  }

  :deep(.el-pager li.active:hover) {
    color: #fff !important;
    background-color: #EC4141 !important;
  }

  :deep(.el-pager li:hover) {
    color: rgba(0, 0, 0, .8) !important;
  }

  :deep(.el-pager li) {
    border: 1px solid rgba(41, 42, 43, .1);
    color: rgba(0, 0, 0, .5) !important;
  }

  :deep(.el-pager li.active+li) {
    border-left: 1px solid rgba(41, 42, 43, .1) !important;
  }


  .up-select {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: none;

    div {
      background-color: rgba(0, 0, 0, .2);
      text-align: center;
      /* 第一个字有间隔 */
      letter-spacing: 5px;
      padding: 5px 5px 5px 10px;
    }

    div:hover {
      background-color: rgba(255, 255, 255, .4);
    }


    div:not(:first-child) {

      border-top: 1px solid rgba(255, 255, 255, .2);
    }
  }

  .clarity-box {
    position: relative;
  }

  .clarity:hover .up-select {
    display: block;
  }

  .up-select:hover {
    display: block;
  }

</style>
